<template>
  <div class="continer">
    <!-- 案例 -->
    <div class="resultList" v-for="item in 5" :key="item">
      <div class="centerImg" @click="toRoomDetail">
        <img class="listImg" src="@/assets/images/test2.jpg" alt>
      </div>
      <span class="labSpan1">天丰国际 三居室 81㎡</span>
      <span class="labSpan2">
        <img class="eyeImg" src="@/assets/images/eye2.jpg" alt>
        <span>800人对此案例感兴趣</span>
      </span>
    </div>
    <!-- 底部 -->
    <empty-tabbar></empty-tabbar>
    <tabbar></tabbar>
  </div>
</template>
<script>
import Tabbar from "@/pages/home/components/Tabbar";
import emptyTabbar from "@/pages/home/components/emptyTabbar";
export default {
  name: "myCollect",
  components: {
    Tabbar,emptyTabbar
  }
};
</script>
<style lang="stylus" scoped>
.continer {
  display: flex;
  align-items: center;
  flex-direction: column;

  .resultList {
    width: 700px;
    border-radius: 10px;
    box-shadow: 0 0 10px 4px #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 14px;
    position: relative;
    padding-top: 35px;

    .centerImg {
      width: 629px;
      height: 360px;
      position: relative;

      .listImg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }

      .cenBot {
        height: 20px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #ffffff;
        position: absolute;
        right: 20px;
        bottom: 20px;
        z-index: 2;
      }
    }
    .labSpan1 {
      display: block;
      width: 628px;
      line-height: 30px;
      font-size: 30px;
      font-weight: bold;
      color: #333333;
      letter-spacing: 1px;
      text-align: left;
      margin: 30px 0 20px;
    }

    .labSpan2 {
      display: flex;
      align-items: center;
      width: 628px;
      line-height: 22px;
      font-size: 22px;
      color: #666666;
      letter-spacing: 1px;
      text-align: left;
      margin-bottom: 35px;

      .eyeImg {
        width: 31px;
        height: 21px;
        margin-right: 10px;
      }
    }
  }
}
</style>
